<!DOCTYPE html>
<html>
<head>
	<title>Photo Gellary</title>
	<style>
	#main
	{
		width:600px;
		height:560px;
		border: 1px solid #000;
		margin: 0 auto;
		background:#000014;
	}
	#main-screen
	{
		width:99%;
		height:70%;
		padding:0;
		margin: 0 auto;
		border: 1px solid  #FFF;
		position:relative;
	}
	#img-display
	{
		width:100%;
		height:100%;
		position:absolute;
		padding:0;
		margin:0;
		border:0;
		z-index:0;
	}
	#img-nav
	{
		width:100%;
		height:20%;
		position:absolute;
		padding:0;
		margin:auto;
		top:150px;
		z-index:1;
	}
	#img-info
	{
		width:100%;
		height:30%;
		position:absolute;
		padding:0;
		margin:0 auto;
		bottom:2px;;
		background:#FFF;
		opacity:0.4;
		z-index:1;
	}
	#img-info:hover
	{
		box-shadow: 0 0 10px #ccc;
	}
	.left-nav
	{
		width:10%;;
		height:100%;
		float:left;
		padding:0;
		margin:1px;
		z-index:1;
	}
	.right-nav
	{
		width:10%;;
		height:100%;
		float:right;
		padding:0;
		margin:1px;
		z-index:1;
	
	}
	.img-left_nav
	{
		height:100%;
		width:100%;
		float:left;
		opacity:0.3;
	}
	.img-left_nav:hover , .img-right_nav:hover
	{
		opacity:0.9;
		background:#000;
	}
	.img-right_nav
	{
		height:100%;
		width:100%;
		float:right;
		opacity:0.3;
	}
	.img-display
	{
		width:100%;
		height:100%;
	}
	#sup-screen
	{
		width:99%;
		height:26%;
		border: 1px solid #FFF;
		margin: 2% auto;
	}
	.img-small
	{
		width:20%;
		height:100%;
		padding:0;
		margin:1% 0 1% 5%;
		float:left;
	}
	</style>
</head>
<body>
	
	<div id="main">
		<div id="main-screen">
			<div id="img-display">
				<img class = "img-display"src="./img/10.jpg">
			</div>
			<div id="img-nav">
				<div class="left-nav">
					<img  class="img-left_nav" src="./img/left_nav.png">
				</div>
				<div class="right-nav">
					<img class="img-right_nav" src="./img/right_nav.png">
				</div>
			</div>
			<div id="img-info">
				<h1>no 10</h1>
			</div>
		</div>
		<div id="sup-screen">
				<div class="left-nav"></div>
				<div class="img-small">
					<img class = "img-display"src="./img/10.jpg">
				</div>
				<div class="img-small">
					<img class = "img-display"src="./img/10.jpg">
				</div>
				<div class="img-small"> 
					<img class = "img-display"src="./img/10.jpg">
				</div>
				<div class="right-nav"></div>
		</div> 
		<script>
		</script>
	</div>

</body>
</html>